*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    color: #ffffff;
    overflow-x:hidden;
}

/* FONDO PRINCIPAL */

.hero{
    background:
    linear-gradient(to bottom,
    rgba(0,0,0,.55),
    rgba(35,0,0,.85)),
    url("lol.jpg");

    width:100%;
    min-height:100vh;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    padding:35px;
}

/* CONTENEDOR */

.container{
    max-width:1100px;
    margin:auto;
}

/* TITULO */

.title{
    margin-top:300px;
}

.title h1{
    font-size:90px;
    letter-spacing:5px;
    font-weight:300;

    color:white;

    text-shadow:
    0 0 15px rgba(255,255,255,0.2);
}

.info{
    margin-top:10px;

    color:#e6dede;

    font-size:20px;
}

/* LINEA */

.line{
    width:100%;
    height:1px;

    background:
    rgba(255,255,255,0.25);

    margin:35px 0;
}

/* TEXTO */

.content{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

.text{
    max-width:750px;
}

.text h3{
    margin-bottom:15px;

    font-weight:400;

    font-size:28px;

    color:#ffeaea;
}

text h2{
    font-size:20px ;
}

.text p{
    line-height:1.9;

    color:#f1e6e6;

    font-size:20px;
}

.text h2{
    line-height:1.8;
    color:#f1e6e6;
}

/* GALERIA */
/* GALERIA */
/* GALERIA */

.gallery{
    margin-top:30px;
    display:flex;
    gap:20px;
    overflow-x:auto;
    padding:20px 10px;
}

/* SCROLL */

.gallery::-webkit-scrollbar{
    height:8px;
}

.gallery::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.3);

    border-radius:10px;
}

/* CAJAS */

.box{
    min-height:260px;
    padding:40px;
    border-radius:20px;
    width:380px;
    min-width:380px;
    max-width:380px;
    background:
    rgba(255,255,255,0.08);
    border:
    1px solid rgba(255,255,255,0.15);
    backdrop-filter:blur(12px);
    position:relative;
    overflow:hidden;
    transition:0.45s ease;
    box-shadow:
    0 0 25px rgba(210,190,255,0.15);
    flex-shrink:0;
}


/* BRILLO */

.box::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    box-shadow:
    0 0 40px rgba(210,190,255,0.25);
    opacity:0;
    transition:0.45s;
}

/* HOVER */

.box:hover{

    transform:
    translateY(-10px);
    box-shadow:
    0 0 30px rgba(220,200,255,0.35),
    0 20px 40px rgba(0,0,0,0.45);
}

.box:hover::after{
    opacity:1;
}
/* TITULO */

.box h2{
    font-size:36px;
    margin-bottom:18px;
    font-weight:500;
    color:white;
    transition:0.4s;
}

/* TEXTO PRINCIPAL */

.short-text{
    color:#f1dede;
    font-size:18px;
    line-height:1.4;
    transition:0.4s;
}

/* CONTENIDO OCULTO */

.hidden-content{
    opacity:0;
    max-height:0;
    overflow:hidden;
    transform:
    translateY(25px);
    transition:
    all 0.6s ease;
    margin-top:0;
}

/* MOSTRAR CONTENIDO */

.box:hover .hidden-content{
    opacity:1;
    max-height:300px;
    transform:
    translateY(0);
    margin-top:20px;
}

/* TEXTO OCULTO */
.hidden-content p{
    color:#f5eeee;
    line-height:1.2;
    margin-bottom:12px;
    font-size:17px;
}

/* AGREGA ESTO AL FINAL DE TU CSS */

.cards-title{
    margin-bottom:35px;
    font-size:55px;
    font-weight:300;
    letter-spacing:4px;
    color:#fff5f5;
    text-shadow:
    0 0 15px rgba(255,255,255,0.15);
}

/* CONTENEDOR */

.cards-container{
    display:grid;
    grid-template-columns:
    repeat(4, 1fr);
    gap:25px;
}

/* BRILLO */

.card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    top:-70px;
    right:-70px;

    transition:0.5s;
}

/* HOVER */

.card:hover{

    transform:
    translateY(-12px)
    scale(1.03);

    box-shadow:
    0 0 30px rgba(255,255,255,0.12),
    0 20px 40px rgba(0,0,0,0.45);
}

.card:hover::before{
    transform:scale(1.4);
}

/* TITULO */

.card h2{
    font-size:34px;

    margin-bottom:20px;

    font-weight:400;

    color:white;

    letter-spacing:2px;
}

/* CONTENIDO */

.card-content{
    opacity:0;

    transform:
    translateY(25px);

    transition:0.5s ease;
}

/* MOSTRAR */

.card:hover .card-content{
    opacity:1;

    transform:
    translateY(0);
}

/* TEXTO */

.card-content p{
    color:#f5eaea;

    margin-bottom:14px;

    line-height:1.7;

    font-size:17px;
}

/* PALABRAS RESALTADAS */

.card-content span{
    color:#ffffff;

    font-weight:bold;
}

/* CS */

.container2{
    
    display:grid;

    grid-template-columns:
    repeat(3, 1fr);

    gap:20px;
}
.card{
   
background:
    rgba(255,255,255,0.08);
    border:    border:1px solid rgba(255,255,255,0.15);
    border-radius:25px;
    padding:25px;
    backdrop-filter: blur(10px);
    transition:0.4s ease;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    width: 355px;
    
}



.card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,0.08);
    border-radius:50%;
    top:-70px;
    right:-70px;
    transition:0.5s;
}

.card:hover::before{
    transform:scale(1.4);
}

.card:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 15px 35px rgba(0,0,0,0.4);
    border-color:rgba(255,255,255,0.3);
}

.card h2{
    font-size:2rem;
    margin-bottom:15px;
    color:#ffffff;
}

.info{
    opacity:0;
    max-height:0;
    transition:0.5s ease;
}

.card:hover .info{
    opacity:1;
    max-height:500px;
}

.info p{
    margin:10px 0;
    line-height:1.5;
    font-size:0.95rem;
}

span{
    color:#fc9fc9;
    font-weight:bold;
}


/* FRASE */
.quote{
    text-align:center;
    margin:80px 0;
    font-size:30px;
    font-style:italic;
    color:#fff5f5;
    text-shadow:
    0 0 10px rgba(255,255,255,0.15);
}